<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象. </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="http://img9.tongzhuo100.com/js/jquery.form.min.js"></script>
    
   <script type="text/javascript">           
                $(document).ready(function() { 
                    var options = { 
                        target:        '#output1',   // 用服务器返回的数据 更新 id为output1的内容.
                        beforeSubmit:  showRequest,  // 提交前
                        success:       showResponse,  // 提交后 
                        //另外的一些属性: 
                        //url:       url         // 默认是form的action，如果写的话，会覆盖from的action. 
                        //type:      type        // 默认是form的method，如果写的话，会覆盖from的method.('get' or 'post').
                        //dataType:  null        // 'xml', 'script', or 'json' (接受服务端返回的类型.) 
                        //clearForm: true        // 成功提交后，清除所有的表单元素的值.
                        resetForm: true        // 成功提交后，重置所有的表单元素的值.
                        //由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间,
                        //当请求大于3秒后，跳出请求. 
                        //timeout:   3000 
                    }; 
                 
                    //'ajaxForm' 方式的表单 .
                    // $('#myForm').ajaxForm(options);  
                    //或者 'ajaxSubmit' 方式的提交.
                    $('#myForm').submit(function() { 
                       $(this).ajaxSubmit(options); 
                       return false; //来阻止浏览器提交.
                    }); 
                }); 
 
               // 提交前
              function showRequest(formData, jqForm, options) { 
                 // formdata是数组对象,在这里，我们使用$.param()方法把他转化为字符串.
                  var queryString = $.param(formData); //组装数据，插件会自动提交数据
                  alert(queryString); //类似 ： name=1&add=2  
                  return true; 
                } 
 
              //  提交后
            function showResponse(responseText, statusText)  { 
                   alert('状态: ' + statusText + '\n 返回的内容是: \n' + responseText); 
             } 

   </script> 
  </head>
  
  <body>
    <h3> Demo 4 : jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象. </h3>
    
    <!-- demo1 -->
    <form id="myForm" action="http://188.188.18.109:8989/manager/article/addArticle" method="post"> 
        标题： <input type="text" name="title" /> <br/>
       封面图片：  <input type="file" name="file" id="upload_file"/><br>
       分类： <input id="usertypeinp" type="text" value="" name="type" placeholder="请选择" />
       作者： <input id="authorname" type="text" name="authorName"/>
       作者sid：<input type="text" name="authorSid" id="authorSid" value="1"/>
       正文：<input type="text" id="hiddenContent" name="hiddenContent" value="你好，你好，你好，你好"/><br/>
     <input type="submit" id="test" value="提交" /> <br/>
     <div id="output1" ></div>
    </form>
 

  </body>
</html>